<template>
  <div class="topbar">
    <div class="wrap topbar-wrap">
      <!-- 左侧内容 -->
      <div class="top-flet">欢迎来到叩丁狼积分商城</div>
      <!-- 右侧内容 -->
      <ul class="top-right">
        <li>
          <img src="../assets/img/userImg.f8bbec5e.png" width="24px" alt="" />
          用户名：游客
        </li>
        <li>我的积分：--</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="login-btn cart" v-if="isShowLogin">
          <span class="img"></span>购物车<span class="rs">0</span>
        </li>
        <li class="login-btn" v-else @click="changeisShowLoginMadal(true)">
          登录
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { weixinLoginAPI } from "@/request/api";
import { mapMutations, mapState, mapActions } from "vuex";
export default {
  name: "JifenTwoTopBar",
  computed: {
    ...mapState({
      isShowLogin: (state) => state.showLogin.isShowLogin,
    }),
  },
  methods: {
    ...mapMutations({
      // 方法名:模块名/方法名
      changeisShowLoginMadal: "showMadal/changeisShowLoginMadal",
      changIsShowLogin: "showLogin/changIsShowLogin",
    }),
    ...mapActions({
      asyncChangeIsShowToastMadal: "showToast/asyncChangeIsShowToastMadal",
    }),
  },
  async created() {
    // console.log(this.$route.query.code);
    let code = this.$route.query.code;
    if (code) {
      let res = await weixinLoginAPI({
        code,
      });
      console.log(res);
      // 返回的res有三种情况  code==0 code==400 code==407
      if (res.code == 0) {
        // 登录成功
        // 1.提示扫码登录成功
        this.asyncChangeIsShowToastMadal({
          show: true,
          msg: "提示扫码登录成功",
          type: "success",
        });
        // 2.购物车显示
        this.changIsShowLogin(true);
        // 3.删除code
        this.$router.push(this.$route.path);
        // 4.存token
        localStorage.setItem("token", res["x-auth-token"]);
      } else if (res.code == 400) {
        // code失效,重新扫码
        // 1.提示二维码失效，重新扫码
        this.asyncChangeIsShowToastMadal({
          show: true,
          msg: "二维码失效，重新扫码",
          type: "info",
        });
        // 2.打开模态框
        this.changeisShowLoginMadal(true);
      } else if (res.code == 407) {
        // 手机和微信绑定成功,重新扫码登录
        // 1.提示重新扫码
        this.asyncChangeIsShowToastMadal({
          show: true,
          msg: "重新扫码登录",
          type: "danger",
        });
        // 2.打开模态框
        this.changeisShowLoginMadal(true);
        // 3.存uuid
        localStorage.setItem("uuid", res.uuid);
      }
    } else {
      let token = localStorage.getItem("token");
      this.changIsShowLogin(Boolean(token));
    }
  },
  // 解决:登录成功后,手动删除token,购物车状态不会改变的问题 方法一
  // watch: {
  //   "$route.path": {
  //     handler(newVal, odlVal) {
  //       // 监听路由是否改变
  //       if (newVal != odlVal) {
  //         // 判断token是否存在
  //         let token = localStorage.getItem("token");
  //         this.changIsShowLogin(Boolean(token));
  //       }
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  background: #242b39;
  .topbar-wrap {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .top-right {
      width: 530px;
      display: flex;
      justify-content: space-between;
      li {
        cursor: pointer;
        &.login-btn {
          height: 40px;
          width: 124px;
          background: #0a328e;
          text-align: center;
        }
        img {
          vertical-align: middle;
          border-radius: 50%;
        }
      }
      .cart {
        display: flex;
        .img {
          margin: 10px 10px 10px 15px;
          display: block;
          width: 20px;
          height: 19px;
          background: url("../assets/img/cart.png");
        }
        .rs {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: red;
          line-height: 20px;
          text-align: center;
          margin-top: 10px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>